import React, { Component } from 'react';
import { View, Text, ScrollView, FlatList } from 'react-native';
import { observer } from 'mobx-react';
import { Scene, Actions } from 'react-native-router-flux';
import _ from 'lodash';
import Icon from '../../../components/NavBarIconBtn';
import Item from './components/item';
import store from '../models/members';
import styles from './styles';
import NoneData from '../../../components/noneData';
import navBarStyle from '../../../components/navBarStyle';

@observer
class Members extends Component {
  onItemPress = member => {
    Actions.familyMemberDetail({
      customerId: this.props.customerId,
      memberId: member.customerFamilyMemberId,
      customerName: this.props.customerName,
      relationType: member.relationType,
    });
  };
  renderItems = ({ item, index }) => (
    <Item
      onItemPress={this.onItemPress.bind(this.props.store, item)}
      key={`member_${index}`}
      customerId={this.props.customerId}
      customerName={this.props.customerName}
      store={this.props.store}
      {...item}
    />
  );
  keyExtractor = item => item.customerFamilyMemberId.toString();
  render() {
    if (this.props.store.data.length < 1) {
      return <NoneData />;
    }
    return (
      <ScrollView>
        <FlatList
          data={this.props.store.data}
          renderItem={this.renderItems}
          keyExtractor={this.keyExtractor}
          ItemSeparatorComponent={() => <View style={styles.separator} />}
        />
      </ScrollView>
    );
  }
}

const AddMumber = ({ customerId }) => (
  <Icon
    name="user-plus"
    title="成员"
    onPress={() => Actions.createFamilyMember({ customerId })}
  />
);

module.exports = (
  <Scene
    key="familyMembersList"
    component={Members}
    title={({customerName}) => `${customerName}的家庭`} 
    path="family/members"
    hideTabBar
    renderRightButton={({ customerId }) => (
      <AddMumber customerId={customerId} />
    )}
    {...navBarStyle}
    store={store}
    onEnter={({ customerId }) => store.init(customerId)}
  />
);
